<template>
  <div>
    <div class="banner">
      <div class="cont">
        <div class="search" @click="goSearchDisShopClick">
          <input
            class="input"
            type="text"
            placeholder="搜索你想要的商品"
            placeholder-style="color:#b1998d"
            v-model="seek"
            confirm-type="search"
            @confirm="seekClick"
            disabled
          />
          <icon
            class="searchClick"
            type="search"
            size="20"
            color="#b1998d"
            @click="searchClick"
          />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <p
          v-for="(item,index) in swiperList"
          :key="index"
          :class="{red:item.id === optId}"
          @click="selectClick(item)"
        >{{item.goodsTypeName}}</p>
      </div>
      <div class="right">
        <div
          v-for="(item,index) in swiperList2"
          :key="index"
          @click="findDisShopClick(item)"
        >
          <img :src="item.img" mode="widthFix" />
          <span>{{item.goodsTypeName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  FIND_SHOP_PLATFORM_TYPE_LIST_API,
  CREATE_GOODS_DIS_API,
  FIND_SHOP_KIND_APPLY_PAGE_API,
  CREATE_SHOP_KIND_APPLY_API
} from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      swiperList: [],
      swiperList2: [],
      currentPage: 1,
      alreadyLastPage: false,
      sonVal: null,
      disShopList: '',
      state: '',
      seek: '',
      optId: '',
      seekState: false
    }
  },
  computed: {
    account () {
      // return this.$store.state.account
      return this.$cookie.get('account')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this._findShopKindApplyPageApi()
    this.getDisShopList()
  },
  onUnload () {
    this.swiperList = []
    this.swiperList2 = []
  },
  methods: {
    findDisShopClick (item) {
      this.$router.push(
        `/pages/shop-management/dis/find-dis-shop/main?goodsPlatformTypeId=${
          item.id
        }&type=${getCurrentPageParams('type')}&goodsTypeName=${
          item.goodsTypeName
        }`
      )
    },
    seekClick () {
      const vm = this
      vm.listInit()
    },
    goSearchDisShopClick () {
      this.$router.push(
        `/pages/shop-management/dis/find-dis-shop/main?isLinkSeek=1&type=${getCurrentPageParams(
          'type'
        )}`
      )
    }, // 搜索跑到其他页面
    selectClick (item) {
      this.optId = item.id
      this.getDisShopList2(this.optId)
    },
    searchClick () {
      const vm = this
      vm.listInit()
    },
    stateClcik () {
      const vm = this
      if (vm.account.shopKind === 'SUPPLIER') {
        vm.$toast('你已经成功供货商，请勿重新申请')
      } else {
        vm.$dialog('确定申请成功供货商').then(r => {
          vm._createShopKindApplyApi()
        })
      }
    },
    findShopInfo (item) {
      this.$router.push(
        `/pages/shop-management/dis/dis-shop-info/main?goodsNo=${item.goodsNo}`
      )
    },
    myDisClick () {
      this.$router.push(`/pages/shop-management/dis/dis-centre/main`)
    },
    disMoneyClick (item) {
      const vm = this
      wx.showModal({
        title: `可赚钱佣金：￥${item.disAmount}`,
        content: `供货价：￥${item.goodsDiscount}`,
        showCancel: true,
        confirmText: '确定',
        confirmColor: '#5d93fd',
        success: function (res) {
          if (res.confirm) {
            vm.createGoodsShop(item.goodsNo)
          } else if (res.cancel) {
          }
        }
      })
    },
    createGoodsShop (goodsNo) {
      const vm = this
      CREATE_GOODS_DIS_API(vm.$store.state.account.shopId, goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('添加成功', '').then(() => {})
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    optClcik (item) {
      const vm = this
      vm.swiperList2.forEach(_ => {
        _.isClick = false
        if (item.goodsTypeName === _.goodsTypeName) {
          item.isClick = true
        }
      })
      vm.sonVal = item.id
      vm.listInit()
    },
    getDisShopList () {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: 0
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.swiperList = r.data.data
            vm.optId = vm.swiperList[0].id
            if (!vm.swiperList2.length) {
              vm.getDisShopList2(vm.swiperList[0].id)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getDisShopList2 (parentId) {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: parentId
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.swiperList2 = r.data.data
            if (vm.swiperList2.length) {
              vm.swiperList2.forEach(_ => {
                _.isClick = false
              })
              vm.swiperList2[0].isClick = true
              // if (!vm.sonVal) {
              vm.sonVal = vm.swiperList2[0].id
            }
            vm.listInit()
            // }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },

    _findShopKindApplyPageApi () {
      const vm = this
      let params = {
        phone: vm.$cookie.get('account').cellphone,
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      FIND_SHOP_KIND_APPLY_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.list.length) {
              let state = r.data.data.list[0].state
              vm.state = state
              // if (state === '0') {
              //   vm.entity2 = '申请中'
              // } else if (state === '1') {
              //   vm.entity2 = '已通过'
              // } else if (state === '2') {
              //   vm.entity2 = '未通过'
              // }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _createShopKindApplyApi () {
      const vm = this
      let params = {
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      CREATE_SHOP_KIND_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  // vm.$router.go(-1)
                  vm._findShopKindApplyPageApi()
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    listInit () {
      const vm = this
      vm.currentPage = 1
      vm.alreadyLastPage = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.banner {
  width: 100%;
  position: relative;
  .cont {
    display: flex;
    justify-content: space-between;
    .search {
      position: relative;
      width: 100%;
      height: 50px;
      .input {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background: #ececec;
        width: 220px;
        height: 32px;
        border-radius: 25px;
        padding-left: 40px;
      }
      .searchClick {
        position: absolute;
        top: 50%;
        left: 70px;
        transform: translate(0, -50%);
        z-index: 2;
      }
    }
  }
}
.content {
  display: flex;
  width: 100%;
  > .left {
    width: 80px;
    > p {
      font-size: 14px;
      text-align: center;
      line-height: 40px;
      border-left: 3px solid #f6f6f6;
      background: #f6f6f6;
      color: #676767;
      &.red {
        border-left: 3px solid #ea4835;
        background: #fff;
      }
    }
  }
  > .right {
    width: 295px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    div {
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // margin: 15px 0;
      margin: 13px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 6px;
      }
      span {
        font-size: 14px;
        line-height: 18px;
      }
    }
    div:nth-child(3n + 2) {
      // margin: 15px 13px;
      margin: 15px 0;
    }
  }
}
</style>
